<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="请输入关键字" id="keyword" />
    <ul id="list"></ul>
    <script>
      //获取关键字输入框这个DOM元素
      let keyword = document.getElementById("keyword");
      //获取联想词列表的的DOM元素
      let list = document.getElementById("list");
      //监听输入框的输入事件，当我们在输入框中输入字符串就会执行回调函数
      keyword.addEventListener("input", (event) => {
        //获取要请求的联想词的关键字
        let wd = event.target.value; //a
        jsonp({
          url: "http://localhost:3000/sugrec", //请求的url地址
          jsonp: "cb", //指定我在向后台传递回调方法名的时候用哪个参数来传递这个方法名
          data: { prod: "pc", wd }, //是来传递给服务的参数字符串对象
        }).then((result) => {
          console.log("jsonp", result);
        });
      });
      function jsonp(options) {
        //const {url,jsonp,data} = options;
        const url = options.url;
        const jsonp = options.jsonp;
        const data = options.data;
        return new Promise(function (resolve, reject) {
          //拼出完整的url地址，请求这个地址，获取返回的数据，传递给resolve，让promise成功
          //在内存里创建一个脚本的DOM元素
          let script = document.createElement("script");
          //声明一个函数名
          let callbackName = `jQuery_${Date.now()}`;
          let queryString = "?";
          for (let key in data) {
            queryString += `${key}=${data[key]}&`;
          }//queryString ?prod=pc&wd=a
          //让脚本的src指向传过来url地址
          //http://localhost:3000/sugrec?prod=pc&wd=a&cb=jQuery_133333
          script.src = url + queryString+`${jsonp}=${callbackName}`; //http://localhost:3000/sugrec
          window[callbackName] = (result) => {
            resolve(result);
          };
          //把script这个脚本对象添加到文档的body上
          document.body.appendChild(script);
          //浏览器看到文档的body上添加了一个脚本，就会自动请求脚本对应的src地址
        });
      }
    </script>
  </body>
</html>
